<template>
  <div class="editUserinfo">
    <!-- nav区域 -->
    <van-nav-bar title="我的资料" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" size="18" color="black" />
      </template>
    </van-nav-bar>
    <!-- 信息区域 -->
    <van-cell title="头像" is-link @click="$router.push('/editInfo?name=pic')">
      <template #default>
        <img class="userImg" :src="userInfo.avatar" alt="" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.nickname"
      @click="$router.push('/editInfo?name=nickname')"
    />
    <van-cell
      title="性别"
      is-link
      :value="
        userInfo.gender.toString() === '0'
          ? '未知'
          : '' || userInfo.gender.toString() === '1'
          ? '男'
          : '' || userInfo.gender.toString() === '2'
          ? '女'
          : ''
      "
      @click="show.gender = true"
    />
    <van-cell
      title="地区"
      is-link
      :value="userInfo.area"
      @click="show.area = true"
    />
    <van-cell
      title="个人简介"
      is-link
      :value="userInfo.intro"
      @click="$router.push('/editInfo?name=intro')"
    />
    <van-button
      type="danger"
      plain
      size="large"
      class="logoutbtn"
      @click="logout"
      >退出登录</van-button
    >
    <!-- 性别弹出层 -->
    <van-popup
      v-model="show.gender"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-picker
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 地区弹出层 -->
    <van-popup v-model="show.area" position="bottom" :style="{ height: '50%' }">
      <van-area
        title="标题"
        :area-list="areaList"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { edit } from '@/api/api.js'
import cityData from '@/utils/cityData.js'
import { getLocal, removeLocal } from '@/utils/local.js'
export default {
  mounted () {
    // 进入页面获取数据用户信息数据
    this.getUserInfo()
  },
  created () {
    // 判断用户是否登录
    if (!getLocal('heimamm_mobile_token')) {
      this.$router.push('/checklogin')
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      areaList: cityData,
      columns: ['未知', '男', '女'],
      show: {
        gender: false,
        area: false
      },
      baseURL: process.env.VUE_APP_URL
    }
  },
  methods: {
    // 退出登录
    logout () {
      this.$toast('请先登录')
      // 清除token
      removeLocal('heimamm_mobile_token')
      // 回到登录页面
      this.$router.push('/login')
    },
    // 地区确认
    async areaConfirm (value) {
      this.userInfo.area = value[1].name
      this.show.area = false
      // 上传地区编号
      await edit(value[1].code)
    },
    // 地区取消
    areaCancel () {
      this.show.area = false
    },
    // 性别取消
    onCancel () {
      this.show.gender = false
    },
    // 性别确认按钮
    async onConfirm (value, index) {
      // 发送请求
      const res = await edit({ gender: index })
      // 调用方法修改vuex
      if (res.code === 200) {
        this.$store.commit('SETUSERINFO', res.data)
      }
      this.onCancel()
    },
    // 调用action辅助函数
    ...mapActions(['getUserInfo']),
    // 跳转事件
    onClickLeft () {
      this.$router.push('/my')
    }
  }
}
</script>

<style lang="less" scoped>
.editUserinfo {
  padding: 0 15px;
  .logoutbtn {
    border-radius: 10px;
  }
  .userImg {
    width: 25px;
    height: 25px;
  }
}
</style>
